<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block data-th-replace="/adminlte/base::base-head"></th:block>
    <link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
    <th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark" th:utext="${roleName}"></h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#"> 用户权限</a></li>
                            <li class="breadcrumb-item active"><a href="/admin/permission/role"> 角色管理</a></li>
                            <li class="breadcrumb-item active">查看权限</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <div class="row mt-2">
                            <button class="btn btn-app"
                                    data-check-rules="#power-table tbody input"
                                    data-toast-error="未选中可以绑定的权限！"
                                    data-handle="data.rules"
                                    data-dialog="confirm"
                                    data-url="/powers"
                                    data-method="post"
                                    data-dialog-t-msg="您确定要绑定权限吗？">
                                <i class="fas fa-plus text-blue"></i> 绑定权限
                            </button>
                            <button class="btn btn-app"
                                    data-check-ids="#power-table tbody input"
                                    data-toast-error="未选中可以解绑的权限！"
                                    data-handle="data.ids"
                                    data-dialog="confirm"
                                    data-url="/powers"
                                    data-method="delete"
                                    data-dialog-t-msg="您确定要解绑权限吗？">
                                <i class="fas fa-trash text-blue"></i> 解绑权限
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="power-table"
                                   class="table table-bordered table-hover table-striped">
                                <colgroup>
                                    <col width="50"/>
                                    <col/>
                                    <col width="400"/>
                                    <col width="100"/>
                                    <col width="90"/>
                                    <col width="80"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th><input type="checkbox"/></th>
                                    <th>名字</th>
                                    <th>备注</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr data-th-each="apiLink: ${apiLinkList}"
                                    th:with="powerId=${powerUtils.getId(powers, apiLink)},flag=${powerId==null},class=${powerId==null?'':'text-success'}" >

                                    <td>
                                        <input th:if="${flag}" type="checkbox" name="rules"
                                               th:data-obj-role_id="${roleId}"
                                               th:data-obj-name="${apiLink.name}"/>
                                        <input th:unless="${flag}" type="checkbox" name="ids"
                                               data-th-value="${powerId}"/>
                                    </td>
                                    <td data-th-utext="${apiLink.name}" th:class="${class}">权限名称</td>
                                    <td data-th-utext="${apiLink.responseDesc.remark}" th:class="${class}">状态</td>
                                    <td data-th-utext="${apiLink.type.value}" th:class="${class}">权限名称</td>
                                    <td th:utext="${flag?'未绑定':'已绑定'}" th:class="${class}">未绑定</td>
                                    <td>
                                        <a th:if="${flag}" href="/powers/one"
                                           th:data-obj-role_id="${roleId}"
                                           th:data-obj-name="${apiLink.name}"
                                           data-method="POST"
                                           title="绑定">
                                            <i class="fas fa-lock text-blue"></i> 绑定
                                        </a>
                                        <a th:unless="${flag}" href="/powers"
                                           th:data-arr-ids="${powerId}"
                                           data-handle="data.ids"
                                           data-method="DELETE"
                                           title="解绑">
                                            <i class="fas fa-unlock text-blue"></i> 解绑
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <th:block data-th-replace="/adminlte/base::base-footer"></th:block>
    <th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
</div>
<script src="/plugins/datatables/jquery.dataTables.js"></script>
<script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script src="/kaibes/js/table-data.js"></script>
<script src="/kaibes/js/table-check.js"></script>
<script type="text/javascript">
    dataTable(1, [0, 5]);
    $("input[type='search']").width(400);
</script>
</body>
</html>